<template >
  <div class="app-container home">
    <div>
      <el-row :gutter="20">
        <el-col :sm="24" :lg="24" style="font-size: 18px; padding-left: 18px; color:#121315">
          <h2><b>菁蓉镇信息技术公共服务平台</b></h2>
        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="update-log">
            <div slot="header" class="clearfix" style="font-size: 18px">
              <span>成果展示</span>
            </div>

            <div class="body">
              <el-carousel :interval="4000" arrow="always">
                <el-carousel-item v-for="(item, index) in images" :key="index">
                  <img
                    :src="item.src"
                    :alt="item.alt"
                    width="100%"
                    height="100%"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="company-info">
            <div slot="header" class="clearfix" style="font-size: 18px">
              <span>公司项目</span>
                <el-button
                  type="primary"
                  style="float: right;"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                >新增项目</el-button>
            </div>
            <div>
              <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                  <el-form-item label="项目名称" prop="ProjectName">
                    <el-input v-model="form.ProjectName" placeholder="请输入项目名称，不可为空" />
                  </el-form-item>
                  <el-form-item label="项目描述" prop="Description">
                    <el-input v-model="form.Description" type="textarea" placeholder="请输入内容" />
                  </el-form-item>
                  <el-form-item label="开始日期" prop="StartDate">
                    <el-date-picker clearable
                                    v-model="form.StartDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择项目开始日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束日期" prop="EndDate">
                    <el-date-picker clearable
                                    v-model="form.EndDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择项目结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="项目预算" prop="Budget">
                    <el-input v-model="form.Budget" placeholder="请输入项目预算" />
                  </el-form-item>
                  <el-form-item label="公司ID" prop="CompanyId">
                    <el-input v-model="form.CompanyId" placeholder="请输入项目所属公司ID，不可为空" />
                  </el-form-item>
                  <el-form-item label="申请资金" prop="FundingRequested">
                    <el-input v-model="form.FundingRequested" placeholder="请输入项目申请资金" />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="submitForm1()">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
                </div>
              </el-dialog>
            </div>
            <router-link to="/project">
            <el-button
              style="float: right;"
              icon="el-icon-search"
              size="mini"
            >查询项目</el-button>
            </router-link>
            <el-button
              type="primary"   style="float:left;"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="showDialog"
            >上传项目照片</el-button>

            <el-dialog
              title="上传照片"
              :visible.sync="dialogVisible"
              width="50%"
            >
              <el-form @submit.native.prevent="submitForm">
                <el-upload
                  action="http://192.168.40.161:8080/media/upload/mediafiles"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview1"
                  :on-remove="handleRemove1"
                  :file-list="fileList"
                  ref="upload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-form-item>
                  <label for="description">请输入项目名:</label>
                  <el-input id="description" v-model="description" required></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" native-type="submit">上传</el-button>
                  <el-button @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible1">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-card>
        </el-col>

      </el-row>
    </div>

    <el-row :gutter="20">
      <el-col :sm="26" :lg="24" style="font-size: 17px; padding-left: 18px;color:#121315">
      </el-col>
    </el-row>
    <el-divider />
    <el-col :xs="24" :sm="24" :md="12" :lg="12">
      <el-card class="update-log">
        <div slot="header" class="clearfix" style="font-size: 18px">
          <span>留言板</span>
        </div>
      </el-card>
    </el-col>
    <el-row :gutter="20">
      <announcement-board />
    </el-row>
  </div>
</template>
<script>
import AnnouncementBoard from "@/views/user/Announcement-board.vue";
import {addProject, updateProject} from "@/api/project/project";

export default {
  components: {AnnouncementBoard},
  props: [],
  name: "Index",
  inheritAttrs: false,
  data() {
    return {
      dialogVisible: false,
      description: '',
      fileList: [], // 用于存储已上传或选择的图片列表
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        ProjectName: null,
        Description: null,
        StartDate: null,
        EndDate: null,
        Budget: null,
        CompanyId: null,
        ResultsDisplay: null,
        FundingRequested: null,
      },
      dialogImageUrl: '',
      dialogVisible1: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ProjectName: [
          {required: true, message: "项目名称，不可为空不能为空", trigger: "blur"}
        ],
        Description: [
          {required: true, message: "项目描述不能为空", trigger: "blur"}
        ],
        StartDate: [
          {required: true, message: "项目开始日期不能为空", trigger: "blur"}
        ],
        EndDate: [
          {required: true, message: "项目结束日期不能为空", trigger: "blur"}
        ],
        CompanyId: [
          {required: true, message: "项目所属公司ID，不可为空不能为空", trigger: "blur"}
        ],
        ResultsDisplay: [
          {required: true, message: "项目成果展示，用于存放图片和视频等不能为空", trigger: "blur"}
        ],
      },
      images: [
        {src: require('@/assets/images/pay1.png'), alt: 'donate'},
        {src: require('@/assets/images/pay2.png'), alt: 'donate'},
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.description = ''; // 清空描述
      this.$refs.upload.clearFiles(); // 清空已上传的文件列表
    },
    handlePictureCardPreview(file) {
      // 处理图片预览逻辑
      console.log(file);
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    handleRemove(file, fileList) {
      // 处理文件移除逻辑
      console.log(file, fileList);
    },
    submitForm() {
      // 这里添加提交表单的逻辑，包括处理description和上传的文件
      console.log('Submitting form with:', this.description, this.fileList);
      // 实际应用中，可在此处调用API上传文件及描述信息
      this.closeDialog();
    },

    /** 提交按钮 */
    submitForm1() {
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      if (this.form.ProjectId != null) {
        updateProject(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        const addParam = {
          pname: this.form.ProjectName,
          desc: this.form.Description,
          start: this.form.StartDate,
          end: this.form.EndDate,
          budget: this.form.Budget,
          cid: this.form.CompanyId,
          link: this.form.ResultsDisplay,
          fund: this.form.FundingRequested,
        }

        addProject(addParam).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
      // }
      // });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ProjectId: null,
        ProjectName: null,
        Description: null,
        StartDate: null,
        EndDate: null,
        Budget: null,
        CompanyId: null,
        ResultsDisplay: null,
        FundingRequested: null,
        FundingApprovalStatus: null
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增项目";
    },
  },
}
</script>
<style scoped lang="scss">
.update-log .body,
.company-info .body{
  padding: 0;
}
.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: absolute;
}

.front{
  z-index:1;
  position: absolute;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}
.clearfix::after {
  clear: both;
}

/* Card container styling */
.box-card {
  width: 480px;
}

/* Item styling */
.item {
  margin-bottom: 18px;
}

/* Text styling */
.text {
  font-size: 14px;
}

.textOverView {
  position: relative;
  .leftArrow {
    position: absolute;
    width: 88px;
    height: 88px;
    top: 45%;
    left: 20px;
    z-index: 999;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightArrow {
    position: absolute;
    width: 88px;
    height: 88px;
    right: 20px;
    top: 45%;
    z-index: 999;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .wid {
    width: 1440px;
    height: 838px;
  }
}
.bold-title {
  font-weight: bold;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

